<template>
    <div>
      
         <el-form :inline="true" :model="order" class="demo-form-inline">
    <el-form-item label="医生名称">
      <el-input v-model="order.name" placeholder="请输入医生名称" />
    </el-form-item>
    <el-form-item label="处方开具科室">
      <el-input v-model="order.phone" placeholder="请输入处方科室" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button  @click="delSelectq">删除选中</el-button>
    </el-form-item>
  </el-form>
<!-- 表格 -->
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection"  />
    <el-table-column label="医生头像" width="180" prop="head">
      <template #default="scope">
          <el-image style="width:50px;height: 50px;" :src="scope.row.head" fits="fill"></el-image>
      </template>
</el-table-column>
    <el-table-column prop="name" label="医生名称"></el-table-column>
    <el-table-column prop="department" label="处方开具科室" show-overflow-tooltip />
    <el-table-column label="处方金额" prop="price"> </el-table-column>
    <el-table-column label="订单操作">
      <template #default="scope">
        <!-- 修改 -->
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >修改</el-button
        >
        <!-- 删除 -->
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
<!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>


  <!-- 修改弹出框 -->
  <el-dialog v-model="dialogFormVisible" title="挂号详情">
    <el-form :model="form">
      <el-form-item label="医生头像" :label-width="formLabelWidth">
        <el-input v-model="form.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="医生名称" :label-width="formLabelWidth">
        <el-input v-model="form.time" autocomplete="off" />
      </el-form-item>
      <el-form-item label="处方开具科室" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="处方金额" :label-width="formLabelWidth">
        <el-input v-model="form.further" autocomplete="off" />
      </el-form-item>
   
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

<!-- 删除弹出框 -->
  <el-dialog
    v-model="centerDialogVisible"
    title="系统提示"
    width="30%"
    destroy-on-close
    center
  >
    <div>
      您正在删除用户挂号信息，此操作不可逆，删除后患者需要重新挂号，确定删除吗
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="delInfo">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
    v-model="centerDialogVisible1"
    title="系统提示"
    width="30%"
    destroy-on-close
    center
  >
    <div>
      您正在删除用户挂号信息，此操作不可逆，删除后患者需要重新挂号，确定删除吗
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="delSelect">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive,ref, watchEffect } from 'vue'
import { ElTable,ElMessage } from 'element-plus'
import {recipelListReq,recipelDelReq,recipelSearchReq,recipelBatchdelReq} from '../../api/Controller.api'
// 搜索框绑定的值
const order = reactive({
  name: '',
  phone: '',
})

// 查询按钮
const onSubmit =async () => {
  if(order.name===''){
    alert('请输入要查询的医生名字或者开具方科室')
    return
  }else{
    const res=await recipelSearchReq({page:currentPage.value,size:pageSize.value,name:order.name})
    console.log(res);
    
    tableData.value= res.data.data
  }
}


// 表格数据
interface User {
    id: number
    name: string
    department: string
    price:number
    head:string
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
// 输入框选中
const dataSel = ref('')
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
  console.log(val);
  dataSel.value = JSON.stringify(val.map(item => item.id))
  console.log(dataSel.value);
  
}
// 表格数据
let tableData = ref([])


// 修改
const handleEdit = (index: number, row: User) => {
    dialogFormVisible.value=true
}
const id=ref(null)
// 删除
const handleDelete = (index: number, row: User) => {
  id.value=row.id
  console.log(index, row)
  centerDialogVisible.value=true
}

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total=ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
  console.log(`${val}`)
}
const handleCurrentChange = (val: number) => {
  console.log(` ${val}`)
}
let head=ref('')
// 获取列表数据
const getUserList=async ()=>{
const res=await recipelListReq({page:currentPage.value,size:pageSize.value})
console.log(res);
res.data.data.forEach(item=>{
  head.value=item.head
})
tableData.value=res.data.data
total.value=res.data.total
}

watchEffect(getUserList)
// 修改弹出框
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
    id:null,
    time:'',
    name:'',
    consultation:'',
    further:'',
    department:'',
    phone:''
})


// 删除弹出框
const centerDialogVisible = ref(false)

// 确定删除
const delInfo=async ()=>{
  const res=await recipelDelReq({id:id.value})
  console.log(res);
  if(res.data.code===0){
            ElMessage.error('删除失败')
        }else{
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
            getUserList()
        }
  centerDialogVisible.value=false
}
// 删除多选
const centerDialogVisible1=ref(false)
const delSelect=async ()=>{
const res=await recipelBatchdelReq({ids:dataSel.value})
console.log(res);
if(res.data.code===0){
            ElMessage.error('删除失败')
        }else{
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
            getUserList()
        }
centerDialogVisible1.value=false

}
const delSelectq=()=>{
  centerDialogVisible1.value=true

}
</script>

<style scoped>
.el-form{
    margin-top: 10px;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>